<style scoped>
.modibutton {
  background-color: #2b85e4;
  color: white;
  border-color: #2b85e4;
}
</style>

<template>
  <div>
    <div v-if="showtip">
      <Tooltip
        style="float: left; margin-right: 8px"
        theme="light"
        content="该专业已有毕业条件，无法添加"
        transfer
      >
        <Button
          icon="ios-add"
          type="primary"
          shape="circle"
          @click="initmodal1(gradereq)"
          disabled
        >增加加专业毕业条件</Button>
      </Tooltip>
    </div>

    <div v-else>
      <Button
        style="float: left; margin-right: 8px"
        icon="ios-add"
        type="primary"
        shape="circle"
        @click="initmodal1(gradereq)"
      >增加加专业毕业条件</Button>
    </div>
    <br />
    <br />
    <br />
    <Modal v-model="modal1" title="录入专业毕业条件" width="480" scrollable @on-ok="addOri(gradereq)">
      <div>
        <Form :model="gradereq" :label-width="120" label-position="left">
          <FormItem label="毕业条件编码：">
            <Input v-model="gradereq.grId" type="text" style="width:90%" />
          </FormItem>
          <FormItem label="选考课门数：">
            <Input v-model="gradereq.mjNum" type="text" style="width:90%" />
          </FormItem>
          <FormItem label="选考课学分：">
            <Input v-model="gradereq.mjScore" type="text" style="width:90%" />
          </FormItem>
          <FormItem label="总学分：">
            <Input v-model="gradereq.mjTotalcredit" type="text" style="width:90%" />
          </FormItem>
          <FormItem label="是否有毕业设计：">
            <Select v-model="gradereq.mjHasgd" style="width:90%">
              <Option value="1">是</Option>
              <Option value="0">否</Option>
            </Select>
          </FormItem>
        </Form>
      </div>
    </Modal>

    <Table border :columns="columnshead" :data="datat">
      <!-- 修改项 -->
      <!-- mjScore -->
      <template slot-scope="{ row, index }" slot="mjScore">
        <Input type="text" v-model="modigrade.mjScore" v-if="editIndex === index" />
        <span v-else>{{ row.mjScore }}</span>
      </template>
      <!-- mjNum -->
      <template slot-scope="{ row, index }" slot="mjNum">
        <Input type="text" v-model="modigrade.mjNum" v-if="editIndex === index" />
        <span v-else>{{ row.mjNum }}</span>
      </template>
      <!-- mjTotalcredit -->
      <template slot-scope="{ row, index }" slot="mjTotalcredit">
        <Input type="text" v-model="modigrade.mjTotalcredit" v-if="editIndex === index" />
        <span v-else>{{ row.mjTotalcredit }}</span>
      </template>
      <!-- mjHasgd -->
      <template slot-scope="{ row, index }" slot="mjHasgd">
        <Select v-model="modigrade.mjHasgd" v-if="editIndex === index" transfer>
          <Option value="是">是</Option>
          <Option value="否">否</Option>
        </Select>
        <span v-else>{{ row.mjHasgd }}</span>
      </template>
      <!-- 修改按钮 -->
      <template slot-scope="{ row, index }" slot="action">
        <div v-if="editIndex === index">
          <Button @click="handleSave(row,index)" size="small" class="modibutton">保存</Button>
          <Button @click="editIndex = -1" size="small" class="modibutton">取消</Button>
        </div>
        <div v-else>
          <Button @click="modiGrade(row, index)" size="small" class="modibutton">修改专业毕业条件</Button>
        </div>
      </template>
    </Table>
  </div>
</template>

<script>
export default {
  props: ["majorId", "mvId"],
  data() {
    return {
      columnshead: [
        {
          title: "专业编码",
          key: "mjId"
        },
        {
          title: "毕业条件编码",
          key: "grId"
        },
        {
          title: "选考课学分",
          slot: "mjScore"
        },
        {
          title: "选考课门数",
          slot: "mjNum"
        },
        {
          title: "总学分",
          slot: "mjTotalcredit"
        },
        {
          title: "是否有毕业设计",
          slot: "mjHasgd"
        },
        {
          title: "计划版本",
          key: "mvId"
        },
        {
          title: "操作",
          slot: "action",
          width: 150,
          align: "center"
        }
      ],
      datat: [],
      modal1: false,
      gradereq: {},
      editIndex: -1,
      modigrade: {},
      showtip: false
    };
  },
  created() {
    this.$axios
      .get(
        this.$host +
          "/Graduaterequirment/graduaterequirment?mjId=" +
          this.majorId
      )
      .then(res => {
        if (res.data.data != null) {
          this.datat.push(res.data.data);
          this.showtip = true;
        }
      });
  },
  methods: {
    initmodal1(gradereq) {
      this.modal1 = true;
      for (var key in gradereq) {
        this.$delete(gradereq, key);
      }
    },
    addOri(gradereq) {
      gradereq.mjId = this.majorId;
      gradereq.mvId = this.mvId;
      this.$axios
        .post(this.$host + "/Graduaterequirment/graduaterequirment", gradereq)
        .then(res => {
          if (res.data.message == "添加成功") {
            this.$Message.success("添加毕业条件成功");
            if (this.datat.length == 10) {
              this.datat.pop();
            }
            var obj = JSON.parse(JSON.stringify(gradereq)); //解决相同对象覆盖问题，深度拷贝解决初始化清空
            this.datat.unshift(obj);
            this.total++;
          } else this.$Message.error("添加毕业条件失败");
        });
    },
    modiGrade(row, index) {
      this.modigrade = row;
      this.editIndex = index;
    },
    handleSave(row, index) {
      row = this.modigrade;
      this.modigrade = JSON.parse(JSON.stringify(row));
      this.$delete(this.modigrade, "_index");
      this.$delete(this.modigrade, "_rowKey");
      this.$axios
        .put(
          this.$host + "/Graduaterequirment/graduaterequirment",
          this.modigrade
        )
        .then(res => {
          if (res.data.message == "修改成功")
            this.$Message.success("修改毕业条件成功");
          else this.$Message.error("修改毕业条件失败");
        });
      this.editIndex = -1;
    }
  }
};
</script>
